@page "/material_icon"

<PageTitle>Material图标库</PageTitle>

<div class="mdui-container-fluid">
    <div class="mdui-row mdui-m-y-4">
        <div class="mdui-col-xs-12 mdui-col-sm-1 mdui-col-md-2"></div>
        <MduiTextField @bind-Value="@_searchInput" OnInput="@OnSearchChanged" Class="mdui-col-xs-12 mdui-col-sm-10 mdui-col-md-8" FloatingLabel
            Label="输入图标名搜索" />
        <div class="mdui-col-xs-12 mdui-col-sm-1 mdui-col-md-2"></div>
    </div>

    <div class="mdui-m-y-3 mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-6 mdui-row-lg-8">
        @foreach (var item in _showIcons)
        {
            <div class="mdui-col mdui-text-center mdui-p-y-3" style="height:120px;cursor:pointer;"
            @onclick="_=>OnClickIconItem(item.Name)">
                <MduiIcon Class="mdui-m-y-1" Style="font-size:48px;" Icon="@item.Name" Color="@Colors.Grey.Primary6" />
                <br />
                <MduiText Typo="@Typo.caption" Color="@Colors.Grey.Primary6" Style="overflow-wrap:break-word">@item.Name
                </MduiText>
            </div>
        }
    </div>
</div>